<template>
    <div>
        <!-- :属性="data中的变量" -->
        <!-- :属性="'字符串'" -->
        <h1 :class="isOk?'yhb':'zzh'" :style="obj">v-bind</h1>
        <!-- class="box ww aaa" -->
        <p :class="{box:isOk,ww:isOk,aaa:isOk}">
            <button @click="handleClick">更新</button>
        </p>
        <!-- v-bind简写: -->
        <img :src="imgUrl" alt="" :width="w">

    </div>
</template>
<script>
export default {
    data(){
        return{
            obj:{
                width:"300px",
                height:"300px",
                // 去掉-后面的首字母大写
                backgroundColor:"yellow",
                // 加引号
                "background-color":"yellow"
            },
            isOk:true,
            w:"200px",
            title:"我是于董",
            imgUrl:"https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png"
        }
    },
    methods:{
        handleClick(){
            this.imgUrl = "http://gips2.baidu.com/it/u=195724436,3554684702&fm=3028&app=3028&f=JPEG&fmt=auto?w=1280&h=960"
        }
    }
}
</script>